<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap组件</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../css/starter-template.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>

</head>

<body>
<div class="container">
    字体组件的几种用法：
    <br/>
    <div>
        字体组件文本：
        <span class="glyphicon glyphicon-music"></span>
    </div>
    <div>
        音乐链接(按钮标识)：
        <a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-music"></span></a>
    </div>
    <div>
        下载按钮：
        <button type="button" class="btn btn-danger">
            <span class="glyphicon glyphicon-download-alt"></span>
        </button>
    </div>
    按钮组：必须有2个div分别放：btn-toolbar、btn-group,btn-sm 可以控制按钮大小
    <div class="btn-toolbar form-group">
        <div class="btn-group">
            <a href="#" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-text-size"></span></a>
            <a href="#" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-play"></span></a>
            <a href="#" class="btn btn-danger"><span class="glyphicon glyphicon-stop"></span></a>
            <a href="#" class="btn bg-danger"><span class="glyphicon glyphicon-facetime-video"></span></a>
        </div>
    </div>
    <div>带有图标的文本框：</div>
    <div class="col-sm-3 col-sm-offset-2">
        <div class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-facetime-video"></span>
            </span>
            <input type="text" class="form-control" placeholder="电影搜索"/>
        </div>
    </div>
    <br/>
    <div>带有图标的下拉菜单：</div>
    <div class="container">
        <!-- 这里的dropdown可以不用，估计这里只是用于标记 -->
        <div class="btn-group dropdown">
            <!-- data-toggle="dropdown": dropdown（下拉菜单）这个属性很重要 -->
            <!--btn-lg : 按钮大小-->
            <button type="button" class="btn btn-default btn-lg" data-toggle="dropdown">
                下拉：
                <span class="caret"></span>
            </button>
            <url class="dropdown-menu">
                <li><a href="#">项目一</a></li>
                <li><a href="#">项目二</a></li>
                <li><a href="#">项目三</a></li>
            </url>
        </div>
    </div>
    <hr/>
    两个效果：1点击效果，2下拉效果
    <hr/>
    <div class="container">
        <!--dropup: 向上菜单-->
        <div class="btn-group dropup">
            <button type="button" class="btn btn-default">下拉</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">

            </button>
            <url class="dropdown-menu">
                <li><a href="#">项目一</a></li>
                <li><a href="#">项目二</a></li>
                <li><a href="#">项目三</a></li>
            </url>
        </div>
    </div>
</div>
</body>
</html>
真是可恶，自己太可恶了。不争气呀。我就是一个超级大咸鱼。
日了啥了？狗吗？[/啊呜呜呜]